<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
	<meta charset="utf-8" />
	<title>cart</title>
	<link rel="stylesheet" type="text/css" href="css/public.css"/>
	<link rel="stylesheet" type="text/css" href="css/proList.css" />
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<!--------------------------------------cart--------------------->
<div class="head ding">
	<div class="wrapper clearfix">
		<div class="clearfix" id="top">
			<h1 class="fl">
				<a href="login" th:href="@{login}">
					<img src="static/img/logo.png" th:src="@{/img/logo.png}"/>
				</a>
			</h1>
			<div class="fr clearfix" id="top1">
				<div th:if="${session.user!=null}" class="fl">
					<p class="fl">
						<a href="logout" id="logout" th:object="${session.user}">
							<span th:text="*{username}">登录后的姓名</span>
						</a>
					</p>
				</div>
				<div th:if="${session.user==null}" class="fl">
				<p class="fl">
					<a href="../user/login.html" id="login">登录</a>
					<a href="../user/reg.html" id="reg">注册</a>
				</p>
				</div>
				<form action="#" method="get" class="fl">
					<input type="text" placeholder="搜索" />
					<input type="button" />
				</form>
				<div class="btn fl clearfix">
					<a th:href="${session.user!=null}?'/user/myPersonCenter':'tologin'">
						<img src="static/img/grzx.png" th:src="@{/img/grzx.png}"/>
					</a>
					<a href="#" class="er1">
						<img src="static/img/ewm.png" th:src="@{/img/ewm.png}"/>
					</a>
					<a href="/tocart">
						<img src="static/img/gwc.png" th:src="@{/img/gwc.png}"/>
					</a>
					<p>
						<a href="#">
							<img src="static/img/smewm.png" th:src="@{/img/smewm.png}"/>
						</a>
					</p>
				</div>
			</div>
		</div>
		<ul class="clearfix" id="bott">
			<li><a href="/">首页</a></li>
			<li>
				<a href="paint">所有商品</a>
				<div class="sList">
					<div class="wrapper  clearfix">
						<a href="paint">
							<dl>
								<dt><img src="img/nav1.jpg"/></dt>
								<dd>浓情欧式</dd>
							</dl>
						</a>
						<a href="flowerDer">
							<dl>
								<dt><img src="img/nav2.jpg"/></dt>
								<dd>浪漫美式</dd>
							</dl>
						</a>
						<a href="decoration">
							<dl>
								<dt><img src="img/nav3.jpg"/></dt>
								<dd>雅致中式</dd>
							</dl>
						</a>
						<a href="paint">
							<dl>
								<dt><img src="img/nav6.jpg"/></dt>
								<dd>简约现代</dd>
							</dl>
						</a>
						<a href="walls">
							<dl>
								<dt><img src="img/nav7.jpg"/></dt>
								<dd>创意装饰</dd>
							</dl>
						</a>
					</div>
				</div>
			</li>
			<li>
				<a href="flowerDer">装饰摆件</a>
				<div class="sList2">
					<div class="clearfix">
						<a href="proList">干花花艺</a>
						<a href="vase_proList">花瓶花器</a>
					</div>
				</div>
			</li>
			<li>
				<a href="decoration">布艺软饰</a>
				<div class="sList2">
					<div class="clearfix">
						<a href="zbproList">桌布罩件</a>
						<a href="bzproList">抱枕靠垫</a>
					</div>
				</div>
			</li>
			<li><a href="walls">墙式壁挂</a></li>
			<li><a href="perfume">蜡艺香薰</a></li>
			<li><a href="idea">创意家居</a></li>
		</ul>
	</div>
</div>
<div class="cart mt">

	<div class="site">
		<p class=" wrapper clearfix">
			<span class="fl">购物车</span>
			<img class="top" src="img/temp/cartTop01.png">
			<a href="/" class="fr">继续购物&gt;</a>
		</p>
	</div>
	<!-----------------table------------------->
	<div class="table wrapper">
		<div class="tr">
			<div>商品</div>
			<div>单价</div>
			<div>数量</div>
			<div>小计</div>
			<div>操作</div>
		</div>
		<div class="th" th:each="product : ${productList}">

			<div class="pro clearfix">
				<label class="fl">
					<input type="checkbox" id="J_CheckBox" name="cartId" th:value="${product.cartId}"/>
					<span for="J_CheckBox"></span>
				</label>
				<a class="fl" href="#">
					<dl class="clearfix">
						<dt class="fl"><img th:src="@{${product.getProductPicture()}}" style="width: 120px;height: 120px;"></dt>
						<dd class="fl">
							<p th:text="${product.getProductName()}">创意现代简约干花花瓶摆件</p>
							<p>颜色分类:</p>
							<p th:text="${product.getCategoryName()+'+'+product.getProductColor()}">白色瓷瓶+白色串枚</p>
							<p th:text="${product.getProductNumber()}">产品编号</p>
						</dd>
					</dl>
				</a>
			</div>
			<div class="price" th:text="'￥'+${product.getPrice()}">￥20.00</div>
			<div class="number">
				<p class="num clearfix">
					<img class="fl sub" src="img/temp/sub.jpg">
					<input type="hidden" th:value="${product.getProductNumber()}">
					<span class="fl" th:text="${product.getProductCount()}">1</span>
					<img class="fl add" src="img/temp/add.jpg">
				</p>
			</div>
			<div class="price sAll" th:text="'￥'+${product.getCountPrice()}">￥20.00</div>
			<div class="price"><a class="del" href="#2">删除</a>
			<input type="hidden" th:value="${product.getProductNumber()}"/>
			</div>
			<!--<a th:href="@{deleteCart(productNumber=${product.getProductNumber()})}">删除</a>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.cartId}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.productNumber}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.productName}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.price}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.categoryName}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.productColor}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.productCount}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.productPicture}"/>-->
			<!--<input type="hidden" th:class="${product.cartId}+'data'" th:value="${product.countPrice}"/>-->
		</div>
		<div class="goOn">空空如也~<a href="/">去逛逛</a></div>
		<div class="tr clearfix">
			<label class="fl">
				<input class="checkAll" type="checkbox"/>
				<span></span>
			</label>
			<p class="fl">
				<a href="#">全选</a>
				<a href="#" class="del">删除</a>
			</p>
			<p class="fr">
				<span>共<small id="sl" class="SelectedItemsCount">0</small>件商品</span>
				<span>合计:&nbsp;<small id="all" class="totalMoney">￥0.00</small></span>
				<a href="shopCartCreatOrder" class="count" id="countMoney" >结算</a>
			</p>
		</div>
</div>
<div class="mask"></div>
<div class="tipDel">
	<p>确定要删除该商品吗？</p>
	<p class="clearfix">
		<a class="fl cer" href="#">确定</a>
		<a class="fr cancel" href="#">取消</a>
	</p>
</div>
<!--返回顶部-->
<div class="gotop">
	<a href="tocart">
		<dl>
			<dt><img src="img/gt1.png"/></dt>
			<dd>去购<br />物车</dd>
		</dl>
	</a>
	<a href="#" class="dh">
		<dl>
			<dt><img src="img/gt2.png"/></dt>
			<dd>联系<br />客服</dd>
		</dl>
	</a>
	<a href="/user/myPersonCenter">
		<dl>
			<dt><img src="img/gt3.png"/></dt>
			<dd>个人<br />中心</dd>
		</dl>
	</a>
	<a href="#" class="toptop" style="display: none;">
		<dl>
			<dt><img src="img/gt4.png"/></dt>
			<dd>返回<br />顶部</dd>
		</dl>
	</a>
	<p>400-800-8200</p>
</div>
<!--footer-->
<div class="footer">
	<div class="top">
		<div class="wrapper">
			<div class="clearfix">
				<a href="#2" class="fl"><img src="img/foot1.png"/></a>
				<span class="fl">7天无理由退货</span>
			</div>
			<div class="clearfix">
				<a href="#2" class="fl"><img src="img/foot2.png"/></a>
				<span class="fl">15天免费换货</span>
			</div>
			<div class="clearfix">
				<a href="#2" class="fl"><img src="img/foot3.png"/></a>
				<span class="fl">满599包邮</span>
			</div>
			<div class="clearfix">
				<a href="#2" class="fl"><img src="img/foot4.png"/></a>
				<span class="fl">手机特色服务</span>
			</div>
		</div>
	</div>
	<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
		违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<!----------------mask------------------->
<div class="mask"></div>
<!-------------------mask内容------------------->
<div class="proDets">
	<img class="off" src="img/temp/off.jpg" />
	<div class="proCon clearfix">
		<div class="proImg fr">
			<img class="list" src="img/temp/proDet.jpg"  />
			<div class="smallImg clearfix">
				<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
				<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
				<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
				<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
			</div>
		</div>
		<div class="fl">
			<div class="proIntro change">
				<p>颜色分类</p>
				<div class="smallImg clearfix">
					<p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p>
					<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p>
					<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
					<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
				</div>
			</div>
			<div class="changeBtn clearfix">
				<a href="#2" class="fl"><p class="buy">确认</p></a>
				<a href="#2" class="fr"><p class="cart">取消</p></a>
			</div>
		</div>
	</div>
</div>
</div>
<div class="pleaseC">
	<p>请选择宝贝</p>
	<img class="off" src="img/temp/off.jpg" />
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(".sub").click(function () {
            var count=$(this).parent().children("span:first").text();
            var productNumber=$(this).parent().children("input:first").val();
            console.log(count);
            console.log(productNumber);
            $.ajax({
                type: "POST",
                url:'/modifyToCartReduce',
                data: {
                    count:count,
                    productNumber:productNumber
                },
                dataType:'json',
                // contentType: "application/json;charset=utf-8",
            });
        }
    );
    $(".add").click(function () {
            var count=$(this).parent().children("span:first").text();
            var productNumber=$(this).parent().children("input:first").val();
            console.log(count);
            console.log(productNumber);
            // var pn = $(this).val("data");
            $.ajax({
                type: "POST",
                url:'/modifyToCartPlus',
                data: {
                    count:count,
                    productNumber:productNumber
                },
                dataType:'json'
                // contentType: "application/json;charset=utf-8",
            });
        }
    );
    	$(".del").click(function () {
    	    console.log("ok");
			var productNumber = $(this).parent().children("input:first").val();
            console.log(productNumber);
			$.ajax({
				type:"POST",
				url:"/deleteCart",
                dataType:'json',
				data:{
                    productNumber:productNumber
				}
			});
        })

	$("[name=cartId]").click(function () {
		var cartId = $(this).val();
		console.log(cartId)
        $("#countMoney").attr("href","shopCartCreatOrder?cartId="+cartId);

    });

    // var tatol=0;
    // var SelectedItemsCount=$(".SelectedItemsCount");
    // var productList=new Array();

    // $.ShoppingCarItemModel=function (){
    //     var cartId;
    //     var productNumber;
    //     var productName;
    //     var price;
    //     var productColor;
    //     var categoryName;
    //     var productCount;
    //     var productPicture;
    //     var countPrice;
	//
    //     this.getCartId=function () {
    //         return this.cartId;
    //     }
	//
    //     this.setCartId=function (cartId) {
    //         this.cartId = cartId;
    //     }
	//
    //     this.getProductNumber=function () {
    //         return this.productNumber;
    //     }
	//
    //     this.setProductNumber=function (productNumber) {
    //         this.productNumber = productNumber;
    //     }
	//
    //     this.getProductName=function (){
    //         return this.productName;
    //     }
	//
    //     this.setProductName=function (productName) {
    //         this.productName = productName;
    //     }
	//
    //     this.getPrice=function () {
    //         return this.price;
    //     }
	//
    //     this.setPrice=function (price) {
    //         this.price = price;
    //     }
	//
    //     this.getProductColor=function () {
    //         return this.productColor;
    //     }
	//
    //     this.setProductColor=function (productColor) {
    //         this.productColor = productColor;
    //     }
	//
    //     this.getCategoryName=function () {
    //         return this.categoryName;
    //     }
	//
    //     this.setCategoryName=function (categoryName) {
    //         this.categoryName = categoryName;
    //     }
	//
    //     this.getProductCount=function () {
    //         return this.productCount;
    //     }
	//
    //     this.setProductCount=function (productCount) {
    //         this.productCount = productCount;
    //     }
	//
    //     this.getProductPicture=function () {
    //         return this.productPicture;
    //     }
	//
    //     this.setProductPicture=function (productPicture) {
    //         this.productPicture = productPicture;
    //     }
	//
    //     this.getCountPrice=function () {
    //         return this.countPrice;
    //     }
	//
    //     this.setCountPricee=function (countPrice) {
    //         this.countPrice = countPrice;
    //     }
    // }

    // $("[name=cartId]").click(function () {
    //     var money=Number($("#"+$(this).val()).text());
    //     if($(this).is(':checked')==true){
	//
    //         //取出参数值
    //         var param=$("."+$(this).val()+"data");
    //         //新建产品对象
    //         var product=new $.ShoppingCarItemModel();
    //         //将产品参数放入产品对象
    //         var cartId;
    //         var productNumber;
    //         var productName;
    //         var price;
    //         var productColor;
    //         var categoryName;
    //         var productCount;
    //         var productPicture;
    //         var countPrice;
    //         product.setCartId(Number($(param[0]).val()));
    //         product.setProductNumber(Number($(param[1]).val()));
    //         product.setProductName($(param[2]).val());
    //         product.setPrice(Number($(param[3]).val()));
    //         product.setProductColor($(param[4]).val());
    //         product.setCategoryName($(param[5]).val());
    //         product.setProductCount(Number($(param[6]).val()));
    //         product.setProductPicture($(param[7]).val());
    //         product.setCountPricee(Number($(param[8]).val()));
	//
    //         //将产品对象放入产品集合
    //         productList.push(product);
	//
    //         tatol=tatol+money;
    //         SelectedItemsCount.text(Number(SelectedItemsCount.text())+1);
    //     }else {
    //         var cartId=$(this).val();
    //         for(var i=0;i<productList.length;i++){
    //             if(productList[i].getCartId()==cartId){
    //                 productList.splice(i,1);
    //                 break;
    //             }
    //         }
    //         tatol=tatol-money;
    //         SelectedItemsCount.text(Number(SelectedItemsCount.text())-1);
    //     }
    //     $(".totalMoney").text(tatol);
    // });
    // $("#countMoney").click(function(e){
    //     if(productList.length<1){
    //         alert("还未选择商品不能结算！")
    //         return false;
    //     }
	//
    //     $.ajax({
    //         url:"closeAccount",
    //         contentType: "application/json",
    //         type:"post",
    //         data:JSON.stringify(productList),
    //         dataType:"json",
    //         success:function(data){
    //             window.location.href="shopCartCreatOrder?num="+data.result;
    //         },
    //         error:function () {
    //             alert("失败！");
    //         }
    //     });
    // });
</script>

</body>
</html>
